<template>
    <div class="container-xy">
        <Row :gutter="20">
            <Col :xs="24" :md="12" :xl="8" :xxl="6" v-for="(item,index) in renderComp" :key="index">
                <gridContent height="360px" :isShowOperate="false" :class="'bg-'+item.theme" >
                    <h2 class="title" slot="title">{{item.title}}</h2>
                    <div slot="content" class="chart-box">
                        <component :is="item.compName"></component>
                    </div>
                </gridContent>
            </Col>
        </Row>
    </div>
</template>
<script>
const requireComponents = require.context(
    "@/components/charts/line/test",
    true,
    /\.vue/
);
let components = {};
const renderComp = [];

requireComponents.keys().forEach((fileName) => {
    const reqCom = requireComponents(fileName);
    const reqComName = fileName.split("/")[1];

    if (reqCom.default) {
        components[reqComName + "-test"] = reqCom.default;
    }
});
for (let name in components) {
    components[name].compName = name;
    renderComp.push(components[name]);
}
export default {
    name: "lines",
    components,
    data() {
        return {
            renderComp
        };
    },

    mounted() {

    },
};
</script>